ディレクション - 設計

ディレクションするためのドキュメント

プロジェクトの要件、内容、規模などによって設計するドキュメントはさまざま

必要となるドキュメント例

- コンセプトシート

- 機能要件

- 機能一覧

- サイト遷移図

- ディレクトリマップ

- 画面設計書

- 制作ガイドライン（デザイン、コーディング）

- 検証シート

- ファイルリスト

- 機能設計書

- システム構成図

- サーバー構成

- データベース設計書

ディレクトリマップサンプル

ワイヤーフレーム制作のベースになる要素の精査

- ロゴ、シンボル

- コピーライト

- シェアボタン

- メニュー

メニューの種類

- ハンバーガー型

- メインイメージ下型

- ヘッダー型

- 下部固定型

- ページフッター型

例

Webサイトのメインビジュアルの構図を集めて分析してみた。

デザインガイドラインの策定

ガイドライン策定物例

- 共通項目：共通ヘッダー、共通フッダー、共通メニュー

- レイアウトパターン

- 利用フォント（Webフォント）

- フォントサイズ：利用するシーンに合わせてサイズを指定

- 各オブジェクト同士のマージン

- 利用色

- 掲載イメージのガイドライン：写真の扱いと掲載OKな写真、フロー図などのトーン、イラスト利用のトーン

- 利用アイコン：オリジナルで作らない場合は、セットを購入する

- 画像化してよい領域

- インタラクション（アニメーション）：ロールオーバー、画面推移、スワイプ

ユーザインターフェイスのデザインのヒント

日本語ドキュメント - Apple Developer

SEO設計

SEO 基本資料

SEO 業者とは | Google 検索セントラル  |  Google Developers

Google ウェブマスター向け公式ブログ

モバイル向けコンテンツ配信

【図解】AMPとは？導入すべき？わかりやすく解説します

外部サービスとの連携

チャットサービス

Zendeskで 顧客視点の サポート体制を構

サイト解析

ヒートマップとは？ : ヒートマップ解析ツール User Heat

A/Bテスト

Optimizely: The World's Leading Digital Experience Platform